<template>
  <div style="padding: 80px">
    <h1 style="color: #fff">欢迎使用 疫苗接种系统预约</h1>
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="item in chart" :key="item.index">
        <img :src="item.image" :alt="item.text" />
      </el-carousel-item>
    </el-carousel>
    <h1>
      <el-popconfirm
        @confirm="addreservation"
        @cancel="cancelEvent"
        width="320"
        cancel-button-type="info"
        confirm-button-text="注册过了"
        cancel-button-text="前去注册"
        icon="Opportunity"
        icon-color="#909399"
        title="你需要先去个人中心注册自己个人信息?"
      >
        <template #reference
          ><el-button type="primary" plain
            >填写个人预约信息</el-button
          ></template
        ></el-popconfirm
      >
    </h1>
  </div>

  <!-- 编辑或者添加的弹窗 -->
  <el-dialog title="预约疫苗接种" v-model="dialogFormVisible" width="50%">
    <el-form :model="form" size="default" :rules="rules" ref="form">
      <el-row>
        <el-col :span="20">
          <el-form-item label="身份证号" label-width="100px" prop="userid">
            <el-input
              v-model="form.userid"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="疫苗名称" label-width="100px" prop="vaccinid">
            <!-- <el-input
              v-model="form.vaccinid"
              autocomplete="off"
            ></el-input> -->
            <el-select v-model="form.vaccinid" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.value"
                :label="item.vname"
                :value="item.createid"
              >
                <span style="float: left">{{ item.createid }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                  >{{ item.vname }}</span
                >
              </el-option>
            </el-select>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="接种针数" label-width="100px" prop="jabnum">
            <el-select v-model="form.jabnum">
              <el-option label="第一针 " value="1" />
              <el-option label="第二针 " value="2" />
              <el-option label="第三针 " value="3" />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="健康水平" label-width="100px" prop="userbody">
            <el-input v-model="form.userbody" autocomplete="off"></el-input>
          </el-form-item> </el-col
      ></el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="是否有过敏史"
            label-width="100px"
            prop="isallergy"
          >
            <el-select v-model="form.isallergy">
              <el-option label="1 (是)" value="1" />
              <el-option label="0 (否)" value="0" />
            </el-select> </el-form-item></el-col
      ></el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="接种地址" label-width="100px" prop="adress">
            <el-input
              v-model="form.adress"
              autocomplete="off"
            ></el-input> </el-form-item></el-col
      ></el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="接种时间"
            label-width="100px"
            prop="reservationtime"
          >
            <el-date-picker
              v-model="form.reservationtime"
              type="datetime"
              placeholder="选择日期和时间"
              :size="size" /></el-form-item></el-col
      ></el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消</el-button>
        <el-button type="primary" @click="saveData('form')"> 确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
  name: 'Vaccinreservation',

  data() {
    return {
      tableData: [],
      chart: [
        {
          text: '图片1',
          image:
            'https://img0.baidu.com/it/u=4107952475,1231380766&fm=253&fmt=auto&app=120&f=PNG?w=750&h=500',
        },
        {
          text: '图片2',
          image:
            'https://img2.baidu.com/it/u=401380378,896550055&fm=253&fmt=auto&app=138&f=PNG?w=667&h=500',
        },
        {
          text: '图片3',
          image:
            'https://img2.baidu.com/it/u=2810297112,1951457216&fm=253&fmt=auto&app=138&f=JPG?w=640&h=392',
        },
      ], //疫苗类型列表
      dialogFormVisible: false, //信息弹出框是否展示
      form: {}, //添加或者修改的数据
    };
  },
  methods: {
    // 前去注册
    cancelEvent() {
      this.$router.push('/userlogin');
    },
    // 添加
    addreservation() {
      this.form = {
        userid: JSON.parse(localStorage.getItem('profile'))?.idcard || '',
      };
      this.getvoccinAll();
      this.dialogFormVisible = true;
    },
    //分页所有疫苗编号和名称查询
    getvoccinAll() {
      this.$http
        .get('/inoculations/vaccin/pageall', {
          params: {
            pageNum: 1,
            pageSize: 20,
          },
        })
        .then((res) => {
          if (res.statusCode == '200') {
            this.total = res.data.total;
            this.tableData = res.data.records;
            console.log(res.data.records);
          }
        })
        .catch(() => {
          ElMessage.error('数据加载失败,请刷新！');
        });
    },
    //用于数据的添加和更新
    saveData() {
      this.$http
        .post('/inoculations/reservation/save', this.form)
        .then((res) => {
          if (res.statusCode == '200') {
            ElMessage({
              message: '预约成功！，请进入个人中心查看预约信息',
              type: 'success',
            });
            this.dialogFormVisible = false;
          }
        })
        .catch(() => {
          ElMessage.error('失败！');
        });
    },
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  line-height: 80px;
  font-weight: 500;
  font-size: 24px;
}
.el-carousel__item img {
  height: 400px;
  width: 700px;
  margin: 0 auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  position: absolute; /*设为绝对定位*/
  opacity: 0.8; /*设置透明度*/
}
</style>
